<!--suppress ALL -->
<include file="./Template/header.html" />
<link rel="stylesheet" type="text/css" href="/Template/css/finishedProductList.css?v=20200702">
<script type="text/javascript">

    $(function() {

        //初始化页面配置
        initPage("成品展示列表");

        var app = new Vue({
            el: '#container',
            data: {
                finishedProductList: [],
            },
            methods: {
                order: function(id) {
                    $("#loadingToast").show();
                    window.location.href = "/wechat/finishedProduct/finishedOrder/id/"+id;
                    setTimeout(function() {
                        $("#loadingToast").hide();
                    }, 2000);
                },
                orderList: function() {
                    $("#loadingToast").show();
                    window.location.href = "/wechat/finishedProduct/orderList";
                    setTimeout(function() {
                        $("#loadingToast").hide();
                    }, 2000);
                },
                orderCart: function() {
                    $("#loadingToast").show();
                    window.location.href = "/wechat/finishedProduct/orderCart";
                    setTimeout(function() {
                        $("#loadingToast").hide();
                    }, 2000);
                },
            }
        })
        function getFinishedProductList(classId, keyword, supplier) {

            $.ajax({
                url:"/wechat/finishedProduct/finishedProductList",
                type:"post",
                data:{
                    classId: classId,
                    keyword: keyword,
                    supplier: supplier,
                },
                dataType:"JSON",
                beforeSend:function(){
                    $("#loadingToast").show();
                },
                complete:function(){
                    $('#loadingToast').hide();
                },
                success:function(data){
                    app.finishedProductList = data;
                    setTimeout(function() {
                        $(".ui-item.measure-info img").bind("click", function() {
                            var upUrl = "/Template/images/icon-up.png";
                            var downUrl = "/Template/images/icon-down.png";
                            $(this).parent().next().toggle();
                            if($(this).attr("src") == upUrl) {
                                $(this).attr("src", downUrl);
                            } else {
                                $(this).attr("src", upUrl);
                            }
                        });
                        $(".ui-item.measure-info img").each(function() {
                            $(this).trigger("click");
                        });
                    },200);
                },
            })
        }
        $(".search-box").change(function() {
            var value = $(this).find("option:selected").text();
            $(this).prev().attr('placeholder',value);
        });


        $("select[name=classId]").change(function() {

            var classId = $(this).val();
            var keyword = $("input[name=keyword]").val();
            getFinishedProductList(classId,keyword,"{$supplier}");

        });

        $("input[name=keyword]").change(function() {
            var classId = $("select[name=classId]").val();
            var keyword = $(this).val();
            getFinishedProductList(classId, keyword,"{$supplier}");

        });

        $("img[name=searchImg]").click(function() {

            var classId = $("select[name=classId]").val();
            var keyword = $("input[name=keyword]").val();
            getFinishedProductList(classId, keyword,"{$supplier}");

        });

        getFinishedProductList("{$classId}","{$keyword}","{$supplier}");

        var value = $("select[name=classId]").find("option:selected").text();
        $("select[name=classId]").prev().attr('placeholder',value);
    });


</script>
<div class="container" id="container">
    <div class = "search">
        <div class="class-search">
            <span class="class-select">分类：</span>
            <img class="icon-arrow" src="/Template/images/icon-arrow.png" alt="">
            <input class="search-line" type="text" placeholder="请选择分类" readonly>
            <select class="search-box" name="classId">
                <option value="0" class="choose">全部</option>
                {:getClassSelectOptionHtml($classId, 0, $user['enterprise_code'])}
            </select>
        </div>
        <div class="keyword-search">
            <span class="keyword-input">关键字：</span>
            <img name="searchImg" class="icon-keyword" src="/Template/images/icon-search.png" alt="">
            <input name="keyword" class="keyword-line" type="text" placeholder="请输入关键字">
            <!--img name="orderList" style="left: -7%;" class="icon-keyword" src="/Template/images/icon-orderList.png" alt="" v-on:click="orderList()"-->
        </div>
    </div>
    <div class="finishedProduct-detail">
        <div class="finishedProduct-info" v-for="list in finishedProductList">
            <div class="have-padding">
                <div class="product-info">
                    <img class="finishedProduct-img" src="{{list.image_url}}" alt="product">
                    <div class="detail-info">
                        <p class="product-name">{{list.name}}
                        <if condition="$access eq 1">
                            <button v-on:click="order(list.finished_product_id)">下 单</button>
                        </if>
                        </p>
                        <p class="product-price"><span style="color: #d92f3b;">￥{{list.price}}</span> / {{list.unit}}</p>

                        <!--<p class="product-class">{{list.class_name}}</p>-->
                        <!--p class="product-supplier">[{{list.supplier_name}}]</p-->
                        <p class="product-supplier" style="width: 8rem">已售：{{list.count}} {{list.unit}}</p>
                        <p class="product-size">规格：{{list.size}} </p>
                    </div>
                    <!--p class="sum">共{{order.number}}件商品 合计:<span style="color: #d92f3b;">￥{{order.price}}</span></p-->
                </div>
                <div class="finishedProduct-detail-info">
                    <div class="ui-item measure-info">
                        <span class="item-class">[{{list.class_name}}]</span>
                        <span class="item-detailname">详细信息</span>
                        <img class="icon-up" src="/Template/images/icon-up.png" alt="">
                    </div>
                    <div>
                        <!--<div class="ui-item ">-->
                            <!--<span class="item-left">编码</span>-->
                            <!--<span class="item-right">{{list.code}}</span>-->
                        <!--</div>-->
                        <div class="ui-item ">
                            <span class="item-left" style="text-align: right">编码:</span>
                            <span class="item-right">{{list.number}}</span>
                        </div>
                        <div class="ui-item messege-left">
                            <span class="item-left" style="text-align: right">性能:</span>
                            <span class="item-right">{{list.function == "" ? "暂无":list.function}}</span>
                        </div>
                        <div class="ui-item ">
                            <span class="item-left" style="text-align: right">适应症:</span>
                            <span class="item-right">{{list.indication == "" ? "暂无":list.indication}}</span>
                        </div>

                    </div>
                </div>
            </div>
            <div class="line"></div>
        </div>
    </div>
    <br/><br/>
    <div class="order-operation">
        <ul style="position: relative">
            <li class="recomend" v-on:click="orderList()">
                <img src="/Template/images/icon-orderList.png" alt="">
                <span>订单记录</span>
            </li>
            <li class="activity" v-on:click="orderCart()">
                <img src="/Template/images/icon-myCart.png" alt="">
                <span>购物车</span>
            </li>
        </ul>
    </div>
    <!--div v-on:click="orderCart()">
        <div id="cart" class="cart">
            <img class="cart-pic" src="/Template/images/icon-orderCart.png?v=2" alt="">
        </div>
    </div-->
</div>

<include file="./Template/footer.html" />

